<template>
	<view class="container">
		<up-row align="center" gutter="10">
			<up-col span="4">
				<view class="title">保修时间</view>
			</up-col>
			<up-col span="2"></up-col>
			<up-col span="6">
				<view class="content">{{data.create_datetime}}</view>
			</up-col>
		</up-row>
		<up-row align="center" gutter="10">
			<up-col span="4">
				<view class="title">状态</view>
			</up-col>
			<up-col span="2"></up-col>
			<up-col span="6">
				<view class="content">
					<span v-if="data.status == 0">待处理</span>
					<span v-if="data.status == 1">处理中</span>
					<span v-if="data.status == 2">已完成</span>
					<span v-if="data.status == 3">已关闭</span>
				</view>
			</up-col>
		</up-row>
		<up-row align="center" gutter="10">
			<up-col span="4">
				<view class="title">类别</view>
			</up-col>
			<up-col span="2"></up-col>
			<up-col span="6">
				<view class="content">{{data.categoryName}}</view>
			</up-col>
		</up-row>
		<up-row align="center" gutter="10">
			<up-col span="4">
				<view class="title">所在园区</view>
			</up-col>
			<up-col span="2"></up-col>
			<up-col span="6">
				<view class="content">{{data.parkName}}</view>
			</up-col>
		</up-row>
		<!-- <up-row align="center" gutter="10">
			<up-col span="4"><view class="title">楼栋房间</view></up-col>
			<up-col span="2"></up-col>
			<up-col span="6"><view class="content">{{data.building_room}}</view></up-col>
		</up-row> -->
		<up-row align="center" gutter="10">
			<up-col span="4">
				<view class="title">所属企业</view>
			</up-col>
			<up-col span="2"></up-col>
			<up-col span="6">
				<view class="content">{{data.company_name}}</view>
			</up-col>
		</up-row>
		<up-row align="center" gutter="10">
			<up-col span="4">
				<view class="title">事件描述</view>
			</up-col>
			<up-col span="2"></up-col>
			<up-col span="6">
				<view class="content">{{data.description}}</view>
			</up-col>
		</up-row>
		<up-row align="center" gutter="10">
			<up-col span="4">
				<view class="title">联系姓名</view>
			</up-col>
			<up-col span="2"></up-col>
			<up-col span="6">
				<view class="content">{{data.contact_name}}</view>
			</up-col>
		</up-row>
		<up-row align="center" gutter="10">
			<up-col span="4">
				<view class="title">联系方式</view>
			</up-col>
			<up-col span="2"></up-col>
			<up-col span="6">
				<view class="content">{{data.contact_phone}}</view>
			</up-col>
		</up-row>

		<up-row align="center" gutter="10">
			<up-col span="4">
				<view class="title">附件</view>
			</up-col>
			<up-col span="8">
				<up-album :urls="urls2"></up-album>
			</up-col>
		</up-row>

	</view>
</template>

<script>
	import {
		categoryList,
		parkList,
		getOrderID
	} from '../../api/reportedMaintenance.js'
	export default {
		data() {
			return {
				data: {},
				urls2: [
					'http://gips3.baidu.com/it/u=1821127123,1149655687&fm=3028&app=3028&f=JPEG&fmt=auto?w=720&h=1280',
					'https://cdn.uviewui.com/uview/album/2.jpg',
					'https://cdn.uviewui.com/uview/album/3.jpg',
					'https://cdn.uviewui.com/uview/album/4.jpg',
					'https://cdn.uviewui.com/uview/album/5.jpg',
					'https://cdn.uviewui.com/uview/album/6.jpg',
				],
			};
		},
		onLoad(option) {
			let parkData = []
			let categoryData = []
			parkList().then((res) => {
				if (res.code == 2000) {
					parkData = res.data
				}
			})
			categoryList().then((res) => {
				if (res.code == 2000) {
					categoryData = res.data
				}
			})
			getOrderID(option.id).then((res) => {
				const parkMap = {};
				const categoryMap = {};
				parkData.forEach((item) => {
					parkMap[item.id] = item.name;
				});
				categoryData.forEach((item) => {
					categoryMap[item.id] = item.name;
				});
				res.data.parkName = parkMap[res.data.park] || '' // 如果找不到对应的 parkName，则赋值为空字符串或其他默认值
				res.data.categoryName = categoryMap[res.data.category] || '';
				this.data = res.data
			})
		}
	}
</script>

<style lang="scss">
	.container {
		padding: 25rpx;

	}

	.u-row {
		margin-bottom: 30rpx;
	}

	.title {
		font-weight: 600;
		font-size: 32rpx;
	}

	.content {
		font-size: 28rpx;
		text-align: right;
	}
</style>